<template>
  <div class="B_one" id="B_one"> </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: '',
  data() {
    return {
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(document.getElementById('B_one'))
      var option = {
        // 背景色
        // backgroundColor: '#0c2b7a',
        // 提示框
        tooltip: {
          trigger: 'item',

        },
        // 网格
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '20%',
          containLabel: true
        },
        // X轴
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['支架1', '支架2', '支架3', '支架4', '支架5', '支架6', '支架7', '支架8', '支架9', '支架10'],
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            }
          },
          axisTick: {
            show: false // 设置为false隐藏刻度线
          },
          axisLabel: {
            color: '#D8D8D9'
          }
        },
        // Y轴
        yAxis: {
          name: '偏移量(厘米)',
          type: 'value',
          interval: 20,
          min: -40,
          max: 80,
          axisLine: {
            lineStyle: {
              color: '#41DCE5'
            }
          },
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          }

        },
        series: [
          {
            name: '折线1',
            type: 'line',
            data: [80, 30, 35, 45, 48, 33, 30, 55, 35, 80],
            lineStyle: {
              width: 5, // 线宽设置
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#06D7F6' // 起始颜色
              }, {
                offset: 0.5,
                color: '#4807EA' // 结束颜色
              },
              {
                offset: 1,
                color: '#FF5CAA' // 结束颜色
              }])
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255,255,255,.3)' // 起始颜色
              }, {
                offset: 1,
                color: 'rgba(255, 255, 255, 0)' // 结束颜色设置为透明，实现区域渐变效果
              }])
            },
            itemStyle: {
              color: '#4895ff'
            },
            smooth: true, // 平滑曲线
            symbol: 'none',  // 设置拐点符号为无（不显示）
          },


        ]
      };
      myChart.setOption(option)
    }
  },
}
</script>
<style lang="less" scoped>
.B_one {
  width: 100%;
  height: 100%;
}
</style>
